<template>
  <div>
    <roofVue title="我的足迹"></roofVue>
    <div v-if="getdata.length > 0">
      <van-cell>
        <div style="text-align: right" @click="guanli">
          <span v-show="!isbools">管理</span>
          <span v-show="isbools">取消</span>
        </div>
      </van-cell>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-grid :column-num="2" style="margin: 0 10px;">
          <van-grid-item
            v-for="item in getdata"
            :key="item.id"
            style="padding: 0.1rem; width: 45vw; height: 80vw; position: relative"
          >
            <van-image
              :src="imgurl + item.product.defaultImg"
              v-if="item.product"
              fit="contain"
              @click="product(item.productId)"
            />

            <div
              v-if="item.product"
              class="van-ellipsis"
              style="width: 100%;"
            >{{ item.product.name }}</div>
            <van-checkbox
              :name="item.id"
              style=" position: absolute;left: 2px;top: 0;"
              v-show="isbools"
            ></van-checkbox>
            <span v-if="item.product">{{ item.product.price }}</span>
            <div v-else>没有数据</div>
          </van-grid-item>
        </van-grid>
      </van-checkbox-group>
      <!-- 上滑进入 -->
      <transition name="van-slide-up">
        <div
          v-show="isbools"
          style=" position: fixed;right: 0;bottom: 0;display: flex;background-color: #fff;justify-content: space-between;width: 100%;"
        >
          <van-checkbox v-model="checked" @change="checked ? checkAll() : toggleAll()">全选</van-checkbox>
          <van-button type="danger" style="width: 22vw" size="small" @click="del" round>删除</van-button>
        </div>
      </transition>
    </div>
    <div v-else>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="没有足迹"
      />
    </div>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      getdata: [],
      isbools: false,
      checked: false,
      result: [],
    };
  },
  components: {
    roofVue,
  },
  methods: {
    // 点击管理
    guanli() {
      this.isbools = !this.isbools;
    },
    // 获取到足迹
    getfootmark() {
      this.$post(
        this.url2 + "/history/query_history/" + this.$store.state.user.id
      )
        .then((res) => {
          console.log(res);
          if (res.code == "0") {
            this.getdata = res.data.itemsHistories;

          }
        })
        .catch((err) => {
          console.log(err);
        });
      // this.axios.post(url,params)
      // .then(res => {
      //   console.log(res)
      // })
      // .catch(err => {
      //   console.error(err);
      // })
    },
    // 删除
    del() {
      this.result.forEach((e) => {
        this.$post(this.url2 + "/deleteFoot", { id: e })
          .then((res) => {
            if (res.errorCode == "0") {
              this.$notify({ type: "success", message: "删除成功" });
              this.getfootmark()
              location.reload()
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
      this.getfootmark();
    },
    // 全选
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    // 反选
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    // 跳转
    product(id) {
      this.Sto.Session.set("productId", id);
      this.$router.push("/product");
    },
  },
  created() {
    this.getfootmark();
  },
  watch: {
    result() {
      // console.log(this.result);
    },
  },
};
</script>

<style  scoped>
.left {
  position: absolute;
  left: 2px;
  top: 0;
}
.fid {
  position: fixed;
  right: 0;
  bottom: 0;
  /* right: 0; */
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  width: 100%;
}
.custom-image . .left {
  position: absolute;
  left: 2px;
  top: 0;
}
.fid {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  width: 100%;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
